<template>
    <div id="six">
        <span class="one" v-for="(book,id) in books" :key="id">
            <div class="top">
             <img v-bind:src="book.img" alt="" />
            </div>
          <div class="bottom">
              <span class="wenben">{{book.wenben}}</span>
          </div>
        </span>
        <!-- <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span> -->
    </div>
  
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
    books: [],
    };
  },
  created() {
    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:3000/anlie");
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log("xhr.responseText", xhr.responseText);
        this.books = JSON.parse(xhr.responseText);
      }
    };
    xhr.send();
  },
};
</script>

<style>
#six{
    min-height: 32rem;
    width: 100%;
    /* background-color: burlywood; */
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-shrink: 0;
}
#six span{
    width: 33%;
    height: 8rem;
    /* background-color: chartreuse; */
}
.one{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.top{
    width: 100%;
    height: 65%;
}
img{
    width: 100%;
    height: 100%;
}
.bottom{
    width: 100%;
    height: 34%;
}
.wenben{
    font-size: .16rem;
}
</style>